<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>字典管理</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/fileList.css"/>
</head>
<body ms-controller="main" class="ms-controller">
<div id="wrapper">
    <div class="boxtoolbar whiteBox actionArea contentbox">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" ms-duplex="searchKey1.startDate"
                       class="layui-input Wdate" onClick="WdatePicker({readOnly:true,maxDate:'%y-%M-%d'})"/>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" ms-duplex="searchKey1.endDate"
                       class="layui-input Wdate"
                       onClick="WdatePicker({readOnly:true,maxDate:'%y-%M-{%d+1}'})"/>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <input type="text" class="layui-input" style="width: 250px"
                       ms-duplex="searchKey1.searchCode" placeholder="车次、车组号、人员编号、人员姓名"/>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal layui-btn-small" ms-on-click="loadSearchData()">搜索</button>
            </div>
        </div>
    </div>
    <div class="boxmain whiteBox lrbox" style="margin-top:-90px">
        <div class="lrboxleft borderR">
            <div class="from-body contentbox8">
                <ul id="treeDemo" class="ztree" style="width:100%;height: 100%; overflow: auto;"></ul>
            </div>
        </div>
        <div class="lrboxmain borderL">
            <div class="from-body contentbox" style=" overflow: auto;">
                <div ms-repeat="tableDatas">
                    <div class="panel panel-primary" ms-repeat-ll="el.trainCodeNums">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <img src="${ctx}/static/images/index/d.png" title="下载该应急文件"
                                     style="cursor: pointer;" width="20" height="20">
                                上传人员编号-<span
                                    style="color:#2f17a8;font-size:12px">{{ll.userNum}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                机械师姓名:<span
                                    style="color:#2f17a8;font-size:12px">{{ll.userName}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                车次:<span
                                    style="color:#2f17a8;font-size:12px">{{ll.trainCode}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                车组号:<span
                                    style="color:#2f17a8;font-size:12px">{{ll.trainNum}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                            </h3>
                        </div>
                        <div class="panel-body">
                            <div class="gallery-wrap">
                                <div class="column">
                                    <div class="inner" ms-repeat-ml="ll.myImages">
                                        <div style="background: rgb(247, 247, 247);"
                                             ms-on-click="picLayer(ml.filePath,ml.fileType)">
                                            <div class="img-wrap">
                                                <img style="height:319px"
                                                     ms-attr-src="${fileServerUrl}{{ml.filePath}}" class="mfp-fade"
                                                     ms-if="ml.fileType=='jpg'"/>
                                                <img style="height:319px" src="${ctx}/static/images/mp3.png"
                                                     class="mfp-fade" ms-if="ml.fileType=='mp3'"/>
                                                <img style="height:319px"
                                                     ms-attr-src="${fileServerUrl}{{ml.coverImagePath}}"
                                                     class="mfp-fade" ms-if="ml.fileType=='mp4'"/>
                                            </div>
                                            <div style="position:absolute;z-indent:2;left:13px;top:5px;cursor: pointer;"
                                                 ms-if="ml.fileType=='mp4'">
                                                <img style="height:319px"
                                                     src="${ctx}/static/images/mp4.png"
                                                     class="mfp-fade" ms-if="ml.fileType=='mp4'"/>
                                            </div>
                                            <div class="caption-static">
                                                <a ms-on-click="DownLoadReportIMG(ml.filePath,ml.fileType)"><span
                                                        style="float:right;color:#2f17a8;font-size:12px">下载</span> </a>
                                                <span style="color:#67a776;float: left;">&nbsp;{{ml.uploadDate}}</span>&nbsp;
                                                <span style="float: right;">{{ml.uploadTime}}&nbsp;</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    var zTreeObj;
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            tableDatas: [],//图片数据
            treeDatas: [],//菜单数据
            currentPage: 1,
            pageSize: 15,
            codeId: '',
            searchKey: {
                id: '',
                startDate: '${today}',
                endDate: '${tomorrow}',
                searchCode: '',
                userNum: '${searchVo.userNum}'
            },
            searchKey1: {id: '', startDate: '${today}', endDate: '${tomorrow}', searchCode: ''},
            title: ''
        })
        avalon.scan();
        loadTreeData();
    });

    //搜索
    function loadSearchData() {
        vm.searchKey = vm.$model.searchKey1;
        loadTableData();
        if (vm.$model.searchKey.searchCode == "") {
            loadTreeData();
        }
    }

    //下载图片
    function DownLoadReportIMG(imgPathURL, fileType) {
        imgPathURL = '${fileServerUrl}' + imgPathURL;
        window.location.href = '${ctx}/downloadController/downloadImage.action?imagePath=' + imgPathURL + "&fileType=" + fileType;
    }

    //初始化分页插件的方法
    function loadTableData() {
        var dataStr = $.param(vm.$model.searchKey);
        $.ajax({
            type: 'post',
            url: '${ctx}/emergeFileController/selectAllEmergeFile.action',
            data: dataStr,
            dataType: "json",
            timeout: 10000,
            beforeSend: function () {
                layui.layer.msg('正在加载数据...', {icon: 16, shade: 0.01});
            },
            success: function (data) {
                if (data.code == 0) {
                    closeDialog();
                    vm.tableDatas = data.datas;
                } else if (data.code == -1) {
                    top.showErrorMsg("数据加载失败");
                }
            }
        });

    }

    //加载菜单数据
    function loadTreeData() {
        var dataStr = $.param(vm.$model.searchKey);
        $.ajax({
            type: 'post',
            url: '${ctx}/emergeFileController/selectAllEmergyUser.action',
            data: dataStr,
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                if (data.code == 0) {
                    vm.treeDatas = data.datas;
                    initZTree();
                } else if (data.code == -1) {
                    top.showErrorMsg("菜单数据加载失败");
                } else {
                    top.showErrorMsg("没有数据");
                }

            }
        });
    }

    //初始化树
    function initZTree() {
        var setting = {
            data: {
                simpleData: {
                    enable: true, //是否启用简单数据类型
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: 0
                }
            },
            callback: { //回调
                onClick: nodeOnClick
            }
        };
        zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, vm.$model.treeDatas);
        zTreeObj.expandAll(true);
        try {
            var firstNode = zTreeObj.getNodes()[0].children[0]
            if (firstNode != null) {
                vm.searchKey.id = firstNode.id;
                zTreeObj.selectNode(firstNode, false);
                loadTableData();
            }
        } catch (e) {

        }

    }

    function picLayer(imagePath, fileType) {
        var fileUrl = '${fileServerUrl}' + imagePath;
        if (fileType == "jpg") {
            parent.layer.open({
                type: 2,
                title: false,
                area: ['60%', '95%'],
                shadeClose: true, //开启遮罩关闭
                content: '${ctx}/toImageShow.action?imagePath=' + fileUrl
            });
        } else if (fileType == "mp4") {
            //iframe层-多媒体
            layui.layer.open({
                type: 2,
                title: false,
                area: ['480px', '640px'],
                shade: 0.8,
                closeBtn: 0,
                shadeClose: true,
                content: fileUrl
            });
        } else if (fileType == "mp3") {
            var dataStr = {
                imagePath: imagePath
            }
            $.ajax({
                type: 'post',
                url: '${ctx}/emergeFileController/changeMp3.action',
                data: dataStr,
                dataType: "json",
                timeout: 10000,
                beforeSend: function () {
                    layui.layer.msg('正在转换格式，请稍后......', {
                        time: 0,
                        icon: 16,
                        shade: 0.01
                    });
                },
                success: function (data) {
                    closeDialog();
                    parent.layer.open({
                        type: 2,
                        title: '自动播放',
                        area: ['700px', '530px'],
                        shadeClose: true,
                        fixed: false, //不固定
                        content: '${ctx}/static/player/index.jsp?url=' + data.url
                    });
                }
            });

        }
    }

    //点击节点的回调
    function nodeOnClick(event, treeId, treeNode) {
        if (treeNode.id == 'root') {
            return;
        }
        vm.searchKey.searchCode = "";
        vm.searchKey.id = treeNode.id;
        loadTableData();
    }

</script>
</body>
</html>